<template>
  <!-- <div class="backBut">
    <el-button type="primary" link @click="backBut" class="pt">返回</el-button>
  </div> -->
  <div class="infobox">
    <div class="info">
      <div class="info-t">
        <div class="animate"> {{ earthquakeInfo.title }}</div>
      </div>
      <div class="info-b" v-show="earthquakeInfo.title">
        <div class="info-item">
          <span class="info-title">发震时刻：</span>
          <span class="info-time">{{ earthquakeInfo.earthquakeTime }}</span>
        </div>
        <div class="info-item">
          <span class="info-title">发震位置：</span>
          <span class="info-time"
            >东经{{ earthquakeInfo.longitude }}，北纬{{ earthquakeInfo.latitude }}</span
          >
        </div>
        <div class="info-item">
          <span class="info-title">震源深度：</span>
          <span class="info-time">{{ earthquakeInfo.depth }}公里</span>
        </div>
      </div>
    </div>
    <div class="rbox">
      <div class="rbox-time">
        {{ currentTime }} <span style="margin-left: 20px"></span>
        <span class="backBut" @click="backBut">返回</span></div
      >
      <div class="rbox-history">
        <div class="rbox-b">
          <span class="poi"></span>
          <span class="poiadress">{{ data.name }}</span>
          <span>{{ data.weather }}</span>
          <span class="weather"></span>
          <span>{{ data.now }} &#8451;</span>
          <span>{{ data.temperature }}&#8451;</span>

          <el-dropdown trigger="click" placement="bottom-end" style="background-color: transparent">
            <span class="menu"></span>
            <template #dropdown>
              <el-dropdown-menu
                style="
                  background-color: rgb(0, 25, 51);
                  border: 1px solid #0e9cff;
                  box-shadow: 0 0 10px #1678e1;
                  color: #fff;
                "
              >
                <el-dropdown-item v-for="(item, index) in toTthreeDays" :key="index">
                  <div style="color: #fff">
                    {{ item.date }} &nbsp; &nbsp; {{ item.daytemp }}-{{
                      item.nighttemp
                    }}&#8451;&nbsp;&nbsp; 白天：{{ item.dayweather }}&nbsp;&nbsp; 晚上：{{
                      item.nightweather
                    }}</div
                  >
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import useTime from '../hook/useTime'
import { useMapStoreStore } from '../stores/index'
import { ref, onMounted, onUnmounted } from 'vue'
import config from '../config/index'
const earthquakeInfo = ref({
  title: '青海海西州茫崖市6.3级地震',
  longitude: '',
  latitude: '',
  depth: '10',
  earthquakeTime: '',
  earthquakeMagnitude: ''
})

const store = useMapStoreStore()
earthquakeInfo.value.title = store.earthquakeInfo.title
earthquakeInfo.value.longitude = store.earthquakeInfo.longitude
earthquakeInfo.value.latitude = store.earthquakeInfo.latitude
earthquakeInfo.value.depth = store.earthquakeInfo.depth
earthquakeInfo.value.earthquakeTime = store.earthquakeInfo.earthquakeTime

const router = useRouter()
const route = useRoute() // 路由

// console.log(route.query);

// const toggleFullscreen = () => {
//   earthquakeInfo.value.title=''
// }
// watch(
//     () => route.query.beforePath,
//     (val) => {
//         if (val && val == '/index')
//             toggleFullscreen()
//     }, { immediate: true }
// )
// watch(
//     () => route.query.data,
//     (val) => {
//       if(val){
//         const data=JSON.parse(val)
//         earthquakeInfo.value={...data}
//       }
//     }, { immediate: true }
// )
const backBut = () => {
  router.go(-1)
}
const currentTime = useTime()
const data = ref({
  name: '',
  weather: '',
  temperature: '',
  now: ''
})
let cityCode = 110101
const toTthreeDays = ref('')
const getWeather = () => {
  fetch(
    `https://restapi.amap.com/v3/weather/weatherInfo?extensions=base&city=${cityCode}&key=${config.GDTK}`
  )
    .then((e) => {
      return e.json()
    })
    .then((e) => {
      const d = e.lives[0]
      data.value.name = d.province + d.city
      data.value.weather = d.weather
      data.value.temperature = d.temperature
    })

  fetch(
    `https://restapi.amap.com/v3/weather/weatherInfo?extensions=all&city=${cityCode}&key=${config.GDTK}`
  )
    .then((e) => {
      return e.json()
    })
    .then((e) => {
      const d = e.forecasts[0].casts[0]
      toTthreeDays.value = e.forecasts[0].casts.slice(1)
      data.value.now = d.daytemp + '-' + d.nighttemp
    })
}

const getCity = () => {
  const longitude = Number(earthquakeInfo.value.longitude) // 替换为实际的经度
  const latitude = Number(earthquakeInfo.value.latitude) // 替换为实际的纬度

  //  var wgs84LonLat =[103.052038,30.857640];
  const location = `${longitude},${latitude}`
  // 使用 fetch 发送请求获取逆地理编码信息
  fetch(
    `https://restapi.amap.com/v3/geocode/regeo?key=${config.GDTK}&location=${location}&poitype=190105&radius=1000&extensions=all&roadlevel=0`
  )
    .then((response) => response.json())
    .then((data) => {
      if (data.status === '1') {
        const addressComponent = data.regeocode.addressComponent
        cityCode = addressComponent.adcode;
        const town = data.regeocode.formatted_address
        setTimeout(() => {
           store.earthquakeInfo.town = town
        }, 500);
        // 调用获取天气的函数，并传入城市编码
        getWeather()
      } else {
        console.log('无法获取地址信息')
      }
    })
    .catch((error) => {
      console.error('获取地址信息失败', error)
    })
}
// const timer  = setInterval(() => {
//   getWeather()
// }, 60000);
getCity()
// const timer  = setInterval(() => {
//   getWeather();
// }, 60000);
// getWeather()
onUnmounted(() => {
  // clearInterval(timer)
})
</script>

<style lang="scss" scoped>
:deep(.el-dropdown-menu__item:not(.is-disabled):hover) {
  background-color: transparent;
  cursor: default;
}
:deep(.el-dropdown-menu__item:not(.is-disabled):hover) {
  background-color: transparent;
  cursor: default;
}
:deep(.el-dropdown-menu__item:not(.is-disabled):focus, .el-dropdown-menu__item:not(.is-disabled):hover) {
  background-color: transparent;
  cursor: default;
}

.poiadress {
  max-width: 90px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.backBut {
  width: 61px;
  height: 28px;
  border-radius: 188px;
  text-align: center;
  line-height: 28px;
  opacity: 1;
  display: inline-block;
  cursor: pointer;
  background: linear-gradient(90deg, #039ec7 4%, #0e5682 100%);
}
.infobox {
  height: 100%;
  width: 100%;
  display: flex;
  font-size: 14px;
  padding: 0 20px;
  box-sizing: border-box;
  background-image: url(/static/assets/header.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .info {
    height: 7.407vh;
    margin-left: 28vw;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    width: calc(100% - 28vw - 300px);
    .info-t {
      font-size: 1.979vw;
      font-weight: bold;
      margin-right: 2.0833vw;
      white-space: nowrap;
      flex: 1;
      // max-width: 35vw;
      overflow: hidden;
    }
    .animate {
      padding-left: 20px;
      font-size: 1.979vw;
      display: inline-block;
      white-space: nowrap;
      animation: 10s wordsLoop linear infinite normal;
    }

    @keyframes wordsLoop {
      0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
      }
      100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
      }
    }

    @-webkit-keyframes wordsLoop {
      0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
      }
      100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
      }
    }
    .info-b {
      font-size: 14px;
    }
  }
  .rbox {
    height: 7.407vh;
    // font-size: 0.7291vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    color: #b9eeff;
    width: 300px;
    margin-left: 30px;
    .rbox-time {
      display: flex;
      align-items: center;
      font-size: 14px;
    }
    .poi,
    .menu,
    .weather {
      display: inline-block;
      width: 18px;
      height: 18px;
    }
    .poi {
      background-image: url(/static/assets/poi.png);
    }
    .weather {
      background-image: url(/static/assets/weather.png);
    }
    .menu {
      background-image: url(/static/assets/menu.png);
      cursor: pointer;
    }

    div {
      text-align: right;
    }
    .rbox-b {
      // width: 20vw;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }
    .rbox-history {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.5vh;
      width: 100%;
    }
  }
}
</style>